Basics
<FORM ACTION="action.php" METHOD=POST>
<input type="name" value="name"/>
<br/>
<textarea name="bio">text</textarea>
<br/>
<select name="age">
<option>12</option>
<option>13</option>
<option>14</option>
</select>
<br/>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
<br/><br/>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br/><br/>
.
.
<br/>
<input type=SUBMIT value="SUBMIT ME"/>
</FORM>
Basics
action.php:
$name = $_POST['name'];
$bio = $_POST['bio'];
$age = $_POST['age'];
File Upload
<form enctype
="multipart/form-data" action
="uploader.php" method
="POST">
<input type
="hidden" name
="MAX_FILE_SIZE" value
="100000" />
Choose a
file to upload
: <input name
="uploadedfile" type
="file" /><br
/>
<input type
="submit" value
="Upload File" />
</form
>
Code is taken from
here
File Upload
PHP File:
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
Basics
Server (username, password, server)
Database
Table.
Simple Application
Phone book (list, add, delete, search)
XMLHttpRequest Object
See an excellent
tutorial at W3C.
Initiating the object
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
}
Calling a remote script
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
Action
xmlhttp
.onreadystatechange
=function()
{
if(xmlhttp
.readyState
==4)
{
document
.myForm
.time.value
=xmlhttp
.responseText
;
}
} Alternative
Using Prototype Framework:
new Ajax.Updater('products', '/some_url', {
method: 'get',
insertion: Insertion.Top,
onSuccess: function(transport){
var response = transport.responseText;
alert("Success! \n\n" + response);
},
onFailure: function(){ alert('Something went wrong...') }
});